<template>
    <div class="table_box" :style="{ height: parseFloat(height) - 50 + 'px', width: parseFloat(width) - 20 + 'px' }">
        <div style="height: 50px;"></div>
        <div id="table_box_in" :style="{ width: width, height: heightIn + 'px' }" @scroll="onScroll"
            @mouseenter="onStop" @mouseleave="onStart">
            <bTable id="table" :label="pList.labels" :table-data="pList.list" :total="pList.total" :is-h="[]"
                :hasPagin="false" :colors="colors" :border="false" :limit="pList.limit">
            </bTable>
            <bTable id="table_copy" :label="pList.labels" :table-data="pList.list" :total="pList.total" :is-h="[]"
                :hasPagin="false" :colors="colors" :border="false" :limit="pList.limit">
            </bTable>
        </div>
    </div>
</template>
<script lang="ts" setup>
import bTable from "@/components/public/b_table.vue";
import { Zhuanzhen } from "@b/index/zhuanzhen";
import { RELOADDINGCOUNT } from "@b/model/enum";
import { onUnmounted, reactive, ref } from "vue";
interface prop {
    height: string, width: string
}
let table_box_in: HTMLElement | null = null
const props = defineProps<prop>()
const pList = reactive(new Zhuanzhen())
const heightIn = ref(0)
const table_height = ref(0)
let count = 0
let now = 'table'
pList.refresh(1)
let timer: any = null
const colors = ['#dfdfdf10', '']
const change = () => {
    count++
    if (count === RELOADDINGCOUNT) {
        pList.refresh(1)
        onStop()
        count = 0
    }
    const table = document.getElementById('table')
    const table_copy = document.getElementById('table_copy')
    if (!table || !table_copy) return
    let t = (now === 'table' ? table_copy : table)
    table_box_in?.removeChild(t)
    table_box_in?.appendChild(t)
    now = (now === 'table' ? 'table_copy' : 'table')
}
const onScroll = () => {
    const top = table_box_in?.scrollTop || 0
    if (top >= table_height.value) {
        change()
        table_box_in!.scrollTop = 0
    }
}
const scroll = (step: number = 1, index: number = 1) => {
    requestAnimationFrame(() => {
        if (step < index) return
        let top = table_box_in?.scrollTop || 0
        table_box_in!.scrollTop = top + 1
        index++
        scroll(step, index)
    })
}
const onStop = () => {
    clearInterval(timer)
}
const onStart = () => {
    timer = setInterval(() => {
        scroll(40)
    }, 1000);
}
pList.afterGetList = () => {
    table_box_in = document.getElementById('table_box_in')
    const table = document.getElementById('table')
    if (!table) return
    setTimeout(() => {
        table_height.value = table?.offsetHeight
        heightIn.value = table_height ? Math.min(table_height.value, parseFloat(props.height) - 40) : 0
        // heightIn.value = table_height ? parseFloat(props.height) - 40 : 0
        onStart()
    });
}
onUnmounted(() => {
    onStop()
})
</script>

<style scoped>
.table_box {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#table_box_in {
    overflow: auto;
}

.table_box :deep(.el-table) {
    position: static;
}

.table_box :deep(.el-table__inner-wrapper) {
    position: static;
}

.table_box :deep(.el-table__header-wrapper) {
    position: absolute;
    top: 0;
    z-index: 999
}
</style>